<template>
  <!-- 左侧菜单折叠按钮-->
  <div class="menu-float-fold" @click="toggleCollapse">
    <div class="menu-float-fold-box">
      <div class="top"></div>
      <div class="center">
        <vip-icon class="fold-unfold" :icon="collapse ? unfold : fold" />
      </div>
      <div class="bottom"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useSettingsStore } from '/@/store/modules/settings.ts'

defineOptions({
  name: 'VipMenuFloatFold'
})

defineProps({
  unfold: {
    type: String,
    default: 'arrow-right-line'
  },
  fold: {
    type: String,
    default: 'arrow-left-line'
  }
})
const settingsStore = useSettingsStore()
const { collapse } = storeToRefs(settingsStore)
const { toggleCollapse } = settingsStore
</script>

<style scoped lang="scss">
.fold-unfold {
  //color: var(--el-color-grey);
  cursor: pointer;
}

// 左侧菜单折叠按钮
.menu-float-fold {
  cursor: pointer;
  position: fixed;
  bottom: 50px;
  //left: 100px;
  //left: calc(var(--layout-aside-split-submenu-width) + var(--layout-aside-split-width));
  //z-index: var(--el-z-index);
  z-index: calc(var(--el-z-index)) !important;
  text-align: center;
  //transition: left 0.3s;
  transition: left var(--el-transition);

  //&.isCollapse {
  //  //left: var(--layout-aside-split-width);
  //  left: calc(var(--layout-aside-collapse-width) + var(--layout-aside-split-width));
  //}

  .menu-float-fold-box {
    display: flex;
    flex-direction: column;

    .center {
      width: 20px;
      height: 50px;
      background: #1016254d;
      //background: var(--el-color-primary);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #ffffff !important;

      :deep() {
        i {
          font-size: 16px;
          font-weight: bold;
          //line-height: 50px;
          color: #ffffff !important;
        }
      }

      //.el-icon {
      //  font-size: 16px;
      //  line-height: 50px;
      //  color: #FFFFFF !important;
      //}
    }

    .top {
      //background: var(--el-color-primary);
      width: 0;
      height: 0;
      border: 10px solid;
      border-color: transparent transparent rgba(16, 22, 37, 0.3) rgba(16, 22, 37, 0.3);
    }

    .bottom {
      width: 0;
      height: 0;
      border: 10px solid;
      border-color: rgba(16, 22, 37, 0.3) transparent transparent rgba(16, 22, 37, 0.3);
    }
  }
}
</style>
